<template>
  <div>
    <!-- 搜索框 -->
    <!-- 第一行 -->
    <el-row>
      <el-col :span="14">
        <el-input
          placeholder="请输入内容"
          v-model="name"
          clearable
          @clear="inputClear"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            class="btn"
            @click="queryBtn"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table :data="bookslist" style="width: 100%" border stripe>
      <el-table-column prop="title" label="版本" width="180"> </el-table-column>
      <el-table-column label="详细" width="480">
        <template slot-scope="scope">
          <!-- 渲染详细课本 用标签 -->
          <el-row v-for="item in scope.row.child_list" :key="item.class_id">
            <el-col>
              <el-tag
                type="success"
                @click="getClassId_Num(item)"
                v-if="querInfo.class_id === item.class_id ? activeTag : ''"
                >{{ item.title }}</el-tag
              >
              <el-tag type="info" @click="getClassId_Num(item)" v-else>{{
                item.title
              }}</el-tag>
            </el-col> 
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button type="warning" size="mini" @click="getWordsList"
            >确认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分类查询
      name: "",
      bookslist: [],
      // 发送words请求所需的参数
      querInfo: {
        class_id: "",
        course_num: 0,
      },
      activeTag: false,
    };
  },

  created() {
    this.getBooksList();
  },

  methods: {
    // 获取版本数据列表
    async getBooksList() {
      // 发送get请求 需要解决跨域问题
      const { data: res } = await this.$axios.get("list");
      if (res.code !== 1000) {
        alert("获取数据失败");
      }
      console.log(res);
      this.bookslist = res.datas;
    },
    // 获取课本id
    getClassId_Num(item) {
      // 得到课本id
      this.querInfo.class_id = item.class_id;
      // 得到总课程总条目数
      this.querInfo.course_num = item.course_num;
      this.activeTag = !this.activeTag;
      console.log(item.class_id);
      console.log(item.course_num);

    },
    // 获取单词列表数据
    async getWordsList() {
      // 只有当选了值才可以进行请求发送
      if (!this.activeTag) {
        return alert("请先选择具体的课本~");
      }
      // 路由跳转到words组件
      this.$router.push({
        path: "/books/words",
        // query: {querInfo : this.querInfo },
        // 路由传参，将class_id 以及 course_num传到words组件
        query: { class_id: this.querInfo.class_id, course_num: this.querInfo.course_num },
      });
    },
    // 分类查询请求
    async queryBtn() {
      const { data: res } = await this.$axios.get("list", {
        params: { name: this.name },
      });
      if (res.code !== 1000) {
        return alert("查询分类出错");
      }
      // 得到数据渲染数据
      console.log(this.name);

      this.bookslist = res.datas;
      console.log(this.bookslist);
    },
    // 清空输入框 触发函数
    inputClear() {
      // 加载全部数据
      this.getBooksList();
    },
  },
};
</script>

<style scoped>
.el-col {
  margin-right: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.el-cascader {
  width: 100%;
}
.el-tag:hover {
  cursor: pointer;
}
.btn:hover {
  background-color: #e1f3d8;
}
</style>